<template>
  <div>
    <el-button @click="val++">点击</el-button>
    <div>{{ val }}</div>
    <el-input v-model="formData.val" placeholder="请输入"></el-input>
    <el-select
      v-model="formData.list"
      multiple
      collapse-tags
      placeholder="Select"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";

const val = ref(0);
const formData = reactive({
  val: "",
  list: [],
});
const options = reactive([
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
]);
watch(val, () => {
  console.log("监听val");
  console.log(val.value);
});
watch(formData, () => {
  console.log("监听formData");
  console.log(formData);
});
</script>
<style lang="scss" scoped></style>
